<template>



	<view class="content">

		<view class="image">
			<image style="width: 300upx;" src="/static/logo-tm.png" mode="aspectFit"></image>
			<view style="text-align: center;"><text style="text-align: center;font-size: 40upx;">唯信优品</text></view>
		</view>


		<view class="image">
			<image :src="codeimage" style="width: 300upx;" mode="aspectFit"></image>
		</view>
		<view style="text-align: center;"><text style="text-align: center;font-size: 20upx;">{{MemId}}</text></view>
		<view style="text-align: center;"><text style="text-align: center;font-size: 40upx;margin-top: 5upx;">我推荐唯信优品</text></view>
	</view>




</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				codeimage: '',
				shareinfo: '',
				MemId: ''
			}
		},
		computed: {

			...mapState(['token', 'exp_time', 'hasLogin', 'userInfo'])

		},
		method: {},
		onLoad() {

			this.codeimage = this.$serverUrl + '/app/resource/view/ShareQrCode/' + this.userInfo.MemId + '.png'
			this.MemId = this.userInfo.MemId

		},
		onBackPress() {
			//监听back键，关闭弹出菜单
			if (nvImageMenu.isVisible()) {
				nvImageMenu.hide()
				nvMask.hide()
				return true
			}
		},
		onNavigationBarButtonTap(e) {
			switch (e.type) {
				case "share": //点击分享按钮
					//TODO 未处理h5，h5应调用qq浏览器等自带的share api，如果浏览器不自带share，那么分享图标不应该显示。或者从简的话，h5整个就不显示分享按钮


					uni.request({
						url: this.$serverUrl + '/app/wxh5/getShareParam/' + this.userInfo.MemId,
						header: {
							"Content-Type": "application/json",
							"Authorization": this.token
						},
						data: {},
						method: "POST",
						success: (e) => {

							uni.showToast({
								title: location.href.split('#')[0],
								duration: 2000
							});


							var jweixin = require('weixinj')
							jweixin.config({
								debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId: e.data.appId, // 必填，公众号的唯一标识
								timestamp: e.data.timestamp, // 必填，生成签名的时间戳
								nonceStr: e.data.nonceStr, // 必填，生成签名的随机串
								signature: e.data.signature, // 必填，签名
								jsApiList: ['updateAppMessageShareData','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
							});

							jweixin.error(function(res) {
								// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
								uni.showToast({
									title: res,
									duration: 5000
								});

							});


							jweixin.ready(function() {



								jweixin.checkJsApi({
									jsApiList: ['updateAppMessageShareData','onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
									success: function(res) {
										// 以键值对的形式返回，可用的api值true，不可用为false
										// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
										uni.showToast({
											title: res,
											duration: 5000
										});
										
										
										
										jweixin.updateAppMessageShareData({
											title: '1', // 分享标题
											desc: '2', // 分享描述
											link: 'http://pmxf.ucan.biz/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
											imgUrl: '1', // 分享图标
											success: function() {
												// 设置成功
											}
										})

										jweixin.onMenuShareAppMessage({
											title: '1', // 分享标题
											desc: '2', // 分享描述
											link: 'http://pmxf.ucan.biz/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
											imgUrl: '1', // 分享图标
											success: function() {
												// 设置成功
											}
										})
										
										
										

										
										
										
										
										
										
										
										
										

									}
								});












							});



						},
						complete: function(res) {

							uni.showToast({
								title: res.data,
								duration: 2000
							});
							console.log(res.data);
						}
					})







					// 
					// 
					// 
					// 					console.log("shareB")
					// 					var jweixin = require('weixinj')
					// 					jweixin.config({
					// 						debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					// 						appId: 'wx0f8ff03cd697d1b6', // 必填，公众号的唯一标识
					// 						timestamp: '', // 必填，生成签名的时间戳
					// 						nonceStr: '', // 必填，生成签名的随机串
					// 						signature: '', // 必填，签名
					// 						jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表
					// 					});
					// 					jweixin.ready(function() { //需在用户可能点击分享按钮前就先调用
					// 						jweixin.updateAppMessageShareData({
					// 							title: '1', // 分享标题
					// 							desc: '2', // 分享描述
					// 							link: '3', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					// 							imgUrl: '', // 分享图标
					// 							success: function() {
					// 								// 设置成功
					// 							}
					// 						})
					// 					});
					// 					uni.share({
					// 						provider: strProvider,
					// 						scene: strScene,
					// 						type: 0,
					// 						href: data.param.shareUrl,
					// 						title: data.param.shareTitle,
					// 						summary: data.param.shareSummary,
					// 						imageUrl: data.param.shareImageUrl,
					// 						success: function(res) {
					// 							console.log("success:" + JSON.stringify(res));
					// 						},
					// 						fail: function(err) {
					// 							console.log("fail:" + JSON.stringify(err));
					// 						}
					// 					})
					// 








					// #ifdef APP-PLUS
					nvMask.show()
					nvImageMenu.show() //5+应支持从底部向上弹出的动画
					// #endif
					break;
			}
		}



	}

	// #ifdef APP-PLUS
	// 如下为分享内容定义，可根据业务需求自行定义


	var strShareUrl = 'this.shareinfo.shareUrl/'
	var strShareTitle = ' this.shareinfo.shareTitle'
	var strShareSummary = 'this.shareinfo.shareSummary'
	var strShareImageUrl = 'this.shareinfo.shareImageUrl'

	// var strShareUrl = this.shareinfo.shareUrl
	// var strShareTitle = this.shareinfo.shareTitle
	// var strShareSummary = this.shareinfo.shareSummary
	// var strShareImageUrl = this.shareinfo.shareImageUrl




	//以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
	var screenWidth = plus.screen.resolutionWidth
	//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
	//图标下的按钮文字距离图标5像素，文字大小12像素
	//底部取消按钮高度固定为44px
	//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
	var margin = 25,
		iconWidth = 55,
		icontextSpace = 5,
		textHeight = 12
	var left1 = margin / 360 * screenWidth
	var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
	if (iconSpace <= 5) { //屏幕过窄时，缩小边距和图标大小，再算一次
		margin = 15
		iconWidth = 40
		left1 = margin / 360 * screenWidth
		iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
	}
	var left2 = left1 + iconWidth + iconSpace
	var left3 = left1 + (iconWidth + iconSpace) * 2
	var left4 = left1 + (iconWidth + iconSpace) * 3
	var top1 = left1
	var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
	// 	console.log("screenWidth: " + screenWidth + " ;height: " + plus.screen.resolutionHeight);
	// 	console.log("left1: " + left1);
	// 	console.log("iconSpace: " + iconSpace);
	var nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
		top: '0px',
		left: '0px',
		height: '100%',
		width: '100%',
		backgroundColor: 'rgba(0,0,0,0.2)'
	});
	nvMask.addEventListener("click", function() { //处理遮罩层点击
		nvMask.hide();
		nvImageMenu.hide();
	})
	var nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
		bottom: '0px',
		left: '0px',
		height: '264px',
		width: '100%',
		backgroundColor: 'rgb(255,255,255)'
	});
	//绘制底部图标菜单的内容
	nvImageMenu.draw([{
			tag: 'rect', //菜单顶部的分割灰线
			color: '#e7e7e7',
			position: {
				top: '0px',
				height: '1px'
			}
		},
		{
			tag: 'font',
			id: 'sharecancel', //底部取消按钮的文字
			text: '取消分享',
			textStyles: {
				size: '14px'
			},
			position: {
				bottom: '0px',
				height: '44px'
			}
		},
		{
			tag: 'rect', //底部取消按钮的顶部边线
			color: '#e7e7e7',
			position: {
				bottom: '45px',
				height: '1px'
			}
		},
		{
			tag: 'img',
			id: 'imgwechatfriend',
			src: '/static/sharemenu/wechatfriend.png',
			position: {
				top: top1,
				left: left1,
				width: iconWidth,
				height: iconWidth
			}
		},
		{
			tag: 'font',
			id: 'fontwechatfriend',
			text: '微信好友',
			textStyles: {
				size: textHeight
			},
			position: {
				top: top1 + iconWidth + icontextSpace,
				left: left1,
				width: iconWidth,
				height: textHeight
			}
		},
		{
			tag: 'img',
			id: 'imgwechatmoments',
			src: '/static/sharemenu/wechatmoments.png',
			position: {
				top: top1,
				left: left2,
				width: iconWidth,
				height: iconWidth
			}
		},
		{
			tag: 'font',
			id: 'fontwechatmoments',
			text: '微信朋友圈',
			textStyles: {
				size: textHeight
			},
			position: {
				top: top1 + iconWidth + icontextSpace,
				left: left2 - 2.5,
				width: iconWidth + 5,
				height: textHeight
			}
		},
		// {
		// 	tag: 'img',
		// 	id: 'imgweibo',
		// 	src: '/static/sharemenu/weibo.png',
		// 	position: {
		// 		top: top1,
		// 		left: left3,
		// 		width: iconWidth,
		// 		height: iconWidth
		// 	}
		// },
		// {
		// 	tag: 'font',
		// 	id: 'fontweibo',
		// 	text: '微博',
		// 	textStyles: {
		// 		size: textHeight
		// 	},
		// 	position: {
		// 		top: top1 + iconWidth + icontextSpace,
		// 		left: left3,
		// 		width: iconWidth,
		// 		height: textHeight
		// 	}
		// },
		// {
		// 	tag: 'img',
		// 	id: 'imgqq',
		// 	src: '/static/sharemenu/qq.png',
		// 	position: {
		// 		top: top1,
		// 		left: left4,
		// 		width: iconWidth,
		// 		height: iconWidth
		// 	}
		// },
		// {
		// 	tag: 'font',
		// 	id: 'fontqq',
		// 	text: 'QQ',
		// 	textStyles: {
		// 		size: textHeight
		// 	},
		// 	position: {
		// 		top: top1 + iconWidth + icontextSpace,
		// 		left: left4,
		// 		width: iconWidth,
		// 		height: textHeight
		// 	}
		// },
		{
			tag: 'img',
			id: 'imgcopyurl',
			src: '/static/sharemenu/copyurl.png',
			position: {
				top: top1,
				left: left3,
				width: iconWidth,
				height: iconWidth
			}
		},
		{
			tag: 'font',
			id: 'fontcopyurl',
			text: '复制',
			textStyles: {
				size: textHeight
			},
			position: {
				top: top1 + iconWidth + icontextSpace,
				left: left3,
				width: iconWidth,
				height: textHeight
			}
		},
		{
			tag: 'img',
			id: 'imgmore',
			src: '/static/sharemenu/more.png',
			position: {
				top: top1,
				left: left4,
				width: iconWidth,
				height: iconWidth
			}
		},
		{
			tag: 'font',
			id: 'fontmore',
			text: '更多',
			textStyles: {
				size: textHeight
			},
			position: {
				top: top1 + iconWidth + icontextSpace,
				left: left4,
				width: iconWidth,
				height: textHeight
			}
		},
		//如果想要增加更多按钮，请在这里继续添加，第二列还有2个空位
	])
	nvImageMenu.addEventListener("click", function(e) { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
		// console.log("click menu"+JSON.stringify(e));
		if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
			nvMask.hide();
			nvImageMenu.hide();
		} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
			//屏幕左右边缘5像素及菜单顶部5像素不处理点击
		} else { //点击了图标按钮
			var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
			var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
			var iCol = -1
			if (e.clientX < (left2 - (iconSpace / 2))) {
				iCol = 0
			} else if (e.clientX < (left3 - (iconSpace / 2))) {
				iCol = 1
			} else if (e.clientX < (left4 - (iconSpace / 2))) {
				iCol = 2
			} else {
				iCol = 3
			}

			if (iRow == 0) {
				iClickIndex = iCol
			} else {
				iClickIndex = iCol + 4
			}

			if (iClickIndex >= 0 && iClickIndex <= 3) { //处理具体的点击逻辑，此处也可以自行定义逻辑。如果增减了按钮，此处也需要跟着修改
				var strProvider = "",
					strScene = ""



				try {
					const value = uni.getStorageSync('share');
					if (value) {
						console.log(value)
						let data = JSON.parse(value)



						switch (iClickIndex) {
							case 0:
								strProvider = "weixin"
								strScene = "WXSceneSession"
								break;
							case 1:
								strProvider = "weixin"
								strScene = "WXSenceTimeline"
								break;
							case 2:
								// strProvider = "sinaweibo"
								uni.setClipboardData({
									data: data.param.shareUrl,
									complete() {
										uni.showToast({
											title: "已复制到剪贴板"
										})
									}
								})
								break;
							case 3:
								// strProvider = "qq"
								plus.share.sendWithSystem({
									content: data.param.shareUrl,
								})
								break;
							case 4:
								uni.setClipboardData({
									data: data.param.shareUrl,
									complete() {
										uni.showToast({
											title: "已复制到剪贴板"
										})
									}
								})
								break;
							case 5:
								plus.share.sendWithSystem({
									content: data.param.shareUrl,
								})
								break;
						}
						if (strProvider != "") { //点击了0-3序号的这4个按钮
							// uni.showModal({
							// 	content: "分享点击",
							// 	showCancel: false,
							// })


							uni.share({
								provider: strProvider,
								scene: strScene,
								type: 0,
								href: data.param.shareUrl,
								title: data.param.shareTitle,
								summary: data.param.shareSummary,
								imageUrl: data.param.shareImageUrl,
								success: function(res) {
									console.log("success:" + JSON.stringify(res));
								},
								fail: function(err) {
									console.log("fail:" + JSON.stringify(err));
								}
							})



						}



					}
				} catch (e) {
					// error
				}




			}
		}
	})
	/* nvImageMenu.addEventListener("touchstart", function(e) {
		if (e.screenY > (plus.screen.resolutionHeight - 44)) {
			//TODO 这里可以处理按下背景变灰的效果
		}
	})
	nvImageMenu.addEventListener("touchmove", function(e) {
		//TODO 这里可以处理按下背景变灰的效果
		if (e.screenY > plus.screen.resolutionHeight - 44) {}
	})
	nvImageMenu.addEventListener("touchend", function(e) {
		//TODO 这里可以处理释放背景恢复的效果
	})
	*/
	// #endif
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 750upx;
		filter: blur(1px);
		opacity: .7;
	}

	.ecodep {

		margin: 200upx;

		text-align: center;




	}

	.image {
		text-align: center;



	}
</style>
